<template>
	<view class="custom-container">
		<view class="custom-content">
			<view class="content" v-if="contentShow===1">hi，设定你的每日目标。获取个性方案吧！</view>
			<view class="content-1" v-else-if="contentShow===2">
				<u--form labelPosition="top">
					<u-form-item label="身高">
						<u--input type="number" v-model="height" placeholderClass="plaStyle">
							<template slot="suffix">
								<text>（CM）</text>
							</template>
						</u--input>
					</u-form-item>
					<u-form-item label="体重">
						<u--input type="number" v-model="weight" placeholderClass="plaStyle">
							<template slot="suffix">
								<text>（KG）</text>
							</template>
						</u--input>
					</u-form-item>
				</u--form>
			</view>
			<view class="content-2" v-else-if="contentShow===3">
				<view class="content-2-title">选择你的运动目标吧！</view>
				<view class="content-2-box">
					<view class="content-2-item" v-for="item in scList" :key="item.id" @click="contentShow++">
						{{item.name}}
					</view>
					<view class="content-2-item">
						保持身材
					</view>

				</view>
			</view>
			<view class="content-3" v-else-if="contentShow===4">
				<view class="content-3-title">平板支撑能撑多久?</view>
				<view class="content-3-item" @click="contentShow++">
					60秒以内
				</view>
				<view class="content-3-item" @click="contentShow++">
					60秒以上
				</view>
				<view class="content-3-item" @click="contentShow++">
					没做过，但是经常练腹
				</view>
			</view>
			<view class="content-3" v-else-if="contentShow===5">
				<view class="content-3-title">单次跑步最远距离?</view>
				<view class="content-3-item" @click="contentShow++">
					5公里以内
				</view>
				<view class="content-3-item" @click="contentShow++">
					5公里以上
				</view>
				<view class="content-3-item" @click="contentShow++">
					不跑步，但经常运动
				</view>
				<view class="content-3-item" @click="contentShow++">
					不跑步，其他运动也很少
				</view>
			</view>
			<view class="content-3" v-else-if="contentShow===6">
				<view class="content-3-title">有无重大疾病史?</view>
				<view v-model="currentIndex" :class="item.id===currentIndex?'activeColor': 'content-3-item'"
					v-for="item in healthData" :key="item.id" @click="changeCurrent(item)">
					{{item.name}}
				</view>
			</view>
			<view class="comtent-4" v-else-if="contentShow===7">
				<view class="content-4-title">已为你生成个性化方案</view>
				<image src="../../static/imgs/plan1.png" mode="widthFix" style="height: 294rpx;"></image>
				<text>{{bmi===1?'高级课程':'初级课程'}}</text>
			</view>
			<view class="login_home" style="color: red;float: right;margin-top: 10px;" @click="toHome"
				v-show="contentShow===7">
				返回首页
			</view>
			<view class="content-1-btn" @click="addCount"
				v-show="contentShow!==7 && contentShow!==3 &&contentShow!==4 && contentShow!==5">
				下一步
			</view>
		</view>
	</view>
</template>

<script>
	import {
		TOAST
	} from "@/utils/utils.js"
	export default {
		data() {
			return {
				contentShow: 1,
				height: "",
				weight: "",
				currentIndex: "",
				scList: [{
						id: 1,
						name: "瘦肚腩"
					},
					{
						id: 2,
						name: "瘦肚腩"
					},
					{
						id: 3,
						name: "全身减脂"
					}
				],
				healthData: [{
						name: "有",
						id: 1,
						status: 2
					},
					{
						name: "无",
						id: 2,
						status: 1
					}
				],
				// 指数判断
				bmi: "",
				showBmi: ""
			};
		},
		methods: {
			addCount() {
				if (!this.bmi && this.contentShow === 6) {
					TOAST("请选择有无疾病史")
					return
				}
				if (this.contentShow === 2 && !this.height) {
					TOAST("请输入身高")
					return
				}
				if (this.contentShow === 2 && !this.weight) {
					TOAST("请输入体重")
					return
				}
				if (this.contentShow > 2) {
					this.showBmi = (this.weight / this.height) * (this.weight / this.height)
				}
				this.contentShow++
			},
			changeCurrent(val) {
				this.currentIndex = val.id
				this.bmi = val.status
			},
			toHome() {
				uni.switchTab({
					url: "/pages/index/index"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.custom-container {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		background: url(../../static/imgs/login-bg.png) no-repeat;
		background-size: 50% 50%;
		background-position: 50% 10%;
		background-color: #1A1A1A;
		padding: 60rpx;

		.custom-content {
			width: 100%;
			border-radius: 10rpx;
			background: #fff;
			padding: 80rpx 40rpx;

			.content {
				color: #1A1A1A;
				text-align: center;
				font-size: 40rpx;
			}

			.content-1 {
				.content-title {
					font-size: 40rpx;
				}

				.content-height {
					height: 200rpx;
					line-height: 200rpx;
					text-align: center;
				}
			}

			.content-2 {
				.content-2-title {
					font-size: 40rpx;
				}

				.content-2-box {
					display: flex;
					align-items: center;
					justify-content: space-between;
					flex-wrap: wrap;

					.content-2-item {
						height: 234rpx;
						width: 234rpx;
						border-radius: 10rpx;
						background: #262626;
						margin: 40rpx 0;
						line-height: 234rpx;
						text-align: center;
					}
				}


			}

			.content-3 {
				.content-3-title {
					color: #1A1A1A;
					font-size: 40rpx;
				}

				.content-3-item {
					width: 100%;
					border-radius: 50rpx;
					background: #262626;
					height: 65rpx;
					line-height: 65rpx;
					text-align: center;
					margin: 40rpx 0;
				}
			}

			.comtent-4 {
				position: relative;

				.content-4-title {
					font-size: 40rpx;
					text-align: center;
				}

				image {
					margin-top: 40rpx;
				}

				text {
					position: absolute;
					bottom: 20rpx;
					right: 20rpx;
				}
			}
		}

		.content-1-btn {
			width: 100%;
			height: 82rpx;
			line-height: 82rpx;
			background-color: #F7E522;
			text-align: center;
			margin-top: 60rpx;
			border-radius: 10rpx;
		}
	}

	/dee/.u-form-item__body__left__content__label {
		color: red !important;
	}

	.activeColor {
		color: #fff;
		width: 100%;
		border-radius: 50rpx;
		background: #aaffff;
		height: 65rpx;
		line-height: 65rpx;
		text-align: center;
		margin: 40rpx 0;
	}
</style>
